<template>
    <div class="list">
        <div class="loading" v-if="loading">
            加载中...
        </div>
        <div class="item" v-for="(item, index) in list" :key="index">
            <h3>
                {{ item.title }}
            </h3>
            <p>
                {{ item.content }}
            </p>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted } from "vue";
import axios from "axios";

interface List {
    title: string,
    content: string
}

export default defineComponent({
    setup() {
        // function debounce(func: Function, wait: number) {
        //     let timeout: number | any = null;
        //     return function (...args: any) {
        //         if (timeout) clearTimeout(timeout);
        //         timeout = setTimeout(() => {
        //             func.apply(this, args);
        //         }, wait);
        //     };
        // }
        function trottle(func: Function, wait: number) {
            let timeout: number | any = null;
            return function (...args: any) {
                if (!timeout) {
                    timeout = setTimeout(() => {
                        func.apply(this, args);
                        timeout = null;
                    }, wait);
                }
            };
        }
        function fetchData() {
            if (loading.value) return // 防止重复请求
            loading.value = true     // 打开loading
            axios("/data.json").then(res => {
                console.log(res.data.data);
                //   Object.assign(list.value, newList)
                // list.value = res.data.data.list as List[] // 直接覆盖

                const newList = res.data.data.list as List[]
                // list.value = [...list.value, ...newList] //没有重复  
                list.value = list.value.concat(newList)
                loading.value = false // 关闭loading

            })
        }
        const throttledFetchData = trottle(fetchData, 2000);
        function scrollHandler() {
            // console.log("滚动");
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

            const distance = scrollHeight - scrollTop - clientHeight;
            if (distance < 200) {
                throttledFetchData()
            }
        }
        onMounted(() => {
            window.addEventListener("scroll", scrollHandler, false) //false表示冒泡,true表示捕获
            console.log("组件挂载");
            fetchData()
        })
        onUnmounted(() => {
            console.log("组件卸载");
            window.removeEventListener("scroll", scrollHandler, false)
        })

        let loading = ref(false);
        const list = ref<List[]>([
            {
                title: "test1",
                content: "test1"
            },
            {
                title: "test2",
                content: "test2"
            },
            {
                title: "test3",
                content: "test3"
            }
        ])

        return {
            list, loading
        };
    },
});
</script>

<style scoped>
.item {
    box-sizing: border-box;
    width: 350px;
    height: 180px;
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: -1px;
}

.item h3 {
    font-size: 22px;
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.item p {
    color: #888;
    font-size: 14px;
    line-height: 26px;
    height: 78px;
    overflow: hidden;
    /* max-lines: 3; */
}
</style>
